<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <div class="logo">Portfolio</div>
                <div class="lang-switcher">
                    <button id="langToggle" class="lang-btn" title="切换语言 / Switch Language">
                        <span id="current-lang">中文</span>
                        <span class="lang-arrow">▼</span>
                    </button>
                    <ul id="langMenu" class="lang-dropdown">
                        <li><a href="#" class="lang-option" data-lang="zh">中文</a></li>
                        <li><a href="#" class="lang-option" data-lang="en">English</a></li>
                    </ul>
                </div>
                <button class="menu-toggle" id="menuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul id="navMenu">
                    <li><a href="#home" class="active translatable" data-key="nav-home">首页</a></li>
                    <li><a href="#about" class="translatable" data-key="nav-about">关于我</a></li>
                    <li><a href="#projects" class="translatable" data-key="nav-projects">项目</a></li>
                    <li><a href="#contact" class="translatable" data-key="nav-contact">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main>
        <section id="home">
            <video autoplay muted loop id="home-video" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
                <source src="https://assets.codepen.io/4175254/Apple_video_background.mp4" type="video/mp4">
                您的浏览器不支持视频背景。
            </video>
            <div class="container">
                <div class="home-content">
                    <h1 class="translatable" data-key="home-title">欢迎来到我的作品集</h1>
                    <p class="translatable" data-key="home-subtitle">创新设计与技术的完美结合</p>
                    <div class="apple-links">
                        <a href="#projects" class="apple-link translatable" data-key="home-projects">查看我的项目</a>
                        <a href="#about" class="apple-link translatable" data-key="home-about">了解更多</a>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="about">
            <div class="container">
                <h2 class="section-title translatable" data-key="about-title">关于我</h2>
                <div class="about-content">
                    <div class="about-text">
                        <h3>我是[您的名字]</h3>
                        <p class="translatable" data-key="about-intro1">Python Developer，擅长消息中间件、实时数据处理、高可用架构设计。热爱技术探索，不断学习新知识以提升自身技能。在分布式系统和数据工程方面有丰富的实践经验。</p>
                        <p class="translatable" data-key="about-intro2">工作之余，我喜欢Rust编程、收集幸运星、观看《孤独摇滚》和《摇曳露营》等动漫作品，这些爱好为我的开发工作带来了新的灵感。</p>
                        <!-- Skills section -->
                        <h3 class="translatable" data-key="about-skills" style="margin-top: 1.5rem;">技能</h3>
                        <div class="skills">
                            <span class="skill-badge primary translatable" data-key="skill-python">Python</span>
                            <span class="skill-badge primary translatable" data-key="skill-mongodb">MongoDB</span>
                            <span class="skill-badge secondary translatable" data-key="skill-nextjs">Next.js</span>
                            <span class="skill-badge secondary translatable" data-key="skill-elasticsearch">ElasticSearch</span>
                            <span class="skill-badge tertiary translatable" data-key="skill-rust">Rust</span>
                        </div>
                        
                        <!-- Professional timeline -->
                        <div class="timeline">
                            <h3 class="translatable" data-key="about-experience">专业经历</h3>
                            <div class="timeline-item">
                                <div class="timeline-date">2010-2014</div>
                                <div class="timeline-content">
                                    <h4 class="translatable" data-key="edu-tsinghua-bachelor">清华大学 - 本科</h4>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2014-2016</div>
                                <div class="timeline-content">
                                    <h4 class="translatable" data-key="edu-stanford-master">斯坦福大学 - 硕士</h4>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2017-2020</div>
                                <div class="timeline-content">
                                    <h4 class="translatable" data-key="exp-google">Google - 软件工程师</h4>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2021-2023</div>
                                <div class="timeline-content">
                                    <h4 class="translatable" data-key="exp-openai">OpenAI - 软件工程师</h4>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Achievements -->
                        <div class="achievements">
                            <h3 class="translatable" data-key="about-achievements">个人成就</h3>
                            <ul>
                                <li class="translatable" data-key="about-achievements-list-0">清华大学优秀毕业生</li>
                                <li class="translatable" data-key="about-achievements-list-1">微软MVP</li>
                                <li class="translatable" data-key="about-achievements-list-2">华为开发者认证</li>
                            </ul>
                        </div>
                    </div>
                    <div class="about-image">
                        <img src="https://kirineko.github.io/hita.png" alt="个人照片" style="border-radius: var(--border-radius); height: 300px; width: 300px; object-fit: cover;">
                    </div>
                </div>
            </div>
        </section>
        
        <section id="projects">
            <div class="container">
                <h2 class="section-title translatable" data-key="projects-title">我的项目</h2>
                <div class="project-grid">
                    <div class="project-card">
                        <div class="project-img">
                            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=200&q=80" alt="项目1">
                        </div>
                        <div class="project-info">
                            <h3>项目1名称</h3>
                            <p class="translatable" data-key="projects-subtitle">项目1的详细描述。在这里介绍项目的主要功能、使用的技术栈和解决的问题。</p>
                            <div class="project-tags">
                                <span class="tag">React</span>
                                <span class="tag">Node.js</span>
                                <span class="tag">MongoDB</span>
                            </div>
                            <div class="project-links">
                                <a href="#" target="_blank" class="translatable" data-key="projects-demo">查看演示</a>
                                <a href="#" target="_blank" class="translatable" data-key="projects-source">源代码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <div class="project-img">
                            <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=200&q=80" alt="项目2">
                        </div>
                        <div class="project-info">
                            <h3>项目2名称</h3>
                            <p class="translatable" data-key="projects-subtitle2">项目2的详细描述。在这里介绍项目的主要功能、使用的技术栈和解决的问题。</p>
                            <div class="project-tags">
                                <span class="tag">Vue.js</span>
                                <span class="tag">Firebase</span>
                                <span class="tag">CSS3</span>
                            </div>
                            <div class="project-links">
                                <a href="#" target="_blank" class="translatable" data-key="projects-demo">查看演示</a>
                                <a href="#" target="_blank" class="translatable" data-key="projects-source">源代码</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="contact">
            <div class="particle particle-1"></div>
            <div class="particle particle-2"></div>
            <div class="particle particle-3"></div>
            <div class="particle particle-4"></div>
            <div class="container">
                <h2 class="section-title translatable" data-key="contact-title">联系我</h2>
                <p class="translatable" data-key="contact-intro">如果您想与我合作或有任何问题，请随时联系我。我会尽快回复您！</p>
                
                <div class="contact-content">
                    <div class="contact-form-section">
                        <form id="contact-form">
                            <div class="form-group">
                                <input type="text" id="name" name="name" class="form-control translatable" data-key="contact-name" placeholder="您的姓名" required>
                            </div>
                            <div class="form-group">
                                <input type="email" id="email" name="email" class="form-control translatable" data-key="contact-email" placeholder="您的邮箱" required>
                            </div>
                            <div class="form-group">
                                <textarea id="message" name="message" class="form-control translatable" data-key="contact-message" placeholder="您的消息" required></textarea>
                            </div>
                            <button type="submit" class="btn translatable" data-key="contact-send">发送消息</button>
                        </form>
                    </div>
                    
                    <div class="contact-info-section">
                        <h3 class="translatable" data-key="contact-social">其他联系方式</h3>
                        <div class="social-links">
                            <a href="https://kirineko.github.io" target="_blank" class="social-link">
                                <i class="social-icon">🌐</i>
                                <span class="translatable" data-key="contact-web">个人网页</span>
                            </a>
                            <a href="mailto:lindd_8321@qq.com" class="social-link">
                                <i class="social-icon">✉️</i>
                                <span class="translatable" data-key="contact-email-link">lindd_8321@qq.com</span>
                            </a>
                        </div>
                        
                        <div class="contact-details">
                            <h4 class="translatable" data-key="contact-quick">快速联系</h4>
                            <p class="translatable" data-key="contact-期待">期待与您合作，共同创造优秀的产品！</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <footer>
        <div class="container">
            <p class="translatable" data-key="footer-rights">&copy; 2025 [您的名字]. 保留所有权利.</p>
            <p class="translatable" data-key="footer-built" style="margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.8;">使用现代技术构建</p>
        </div>
    </footer>
    
    <script src="main.js"></script>
</body>
</html>